<template>
    <el-container>
        <!-- 顶部导航栏 -->
        <div class="topbar">
            <div class="box-width">
                <div class="tip">一间花店</div>
                <div class="btn-box">
                    <span>登录</span>
                    <el-divider direction="vertical"></el-divider>
                    <span>注册</span>
                    <el-divider direction="vertical"></el-divider>
                    <span>我的信息</span>
                    <el-divider direction="vertical"></el-divider>
                    <span><i class="el-icon-shopping-cart-2">购物车</i></span>
                </div>
            </div>
        </div>

        <!-- 头部区域 -->
        <el-header>

            <!-- logo -->
            <div class="logo-box"><img src="../../assets/front/img/logo.jpg" alt=""></div>
            <!-- 菜单 -->
            <div>菜单</div>
            <!-- 搜索框 -->
            <div class="seach-box">
                搜索框
            </div>
        </el-header>
        <!-- 主要内容区域 -->
        <el-main>
            主要内容区域
        </el-main>
    </el-container>
</template>

<script>
export default {
    data() {
        return {
        }
    }
}
</script>

<style lang="less" scoped>
.box-width {
    width: 1240px;
    margin: 0 auto;
}
/* 顶部导航栏CSS */
.topbar {
    height: 40px;
    background-color: #414141;
    margin-bottom: 20px;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.tip {

}
.btn-box {
    cursor: pointer;
}
.el-header {
    width: 100%;
    height: 80px !important;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
//logo
.logo-box > img {
    width: 128px;
    height: 80px;
}
</style>